<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d");

  // 配置虚线方案

  // 实5虚5实5虚5实5虚5实5虚5实5虚5...
  ctx.setLineDash([5]);
  // 实5虚10实5虚10实5虚10实5虚10...
  // ctx.setLineDash([5, 10]);
  // 实5虚20实50虚5实20虚50实5虚20实50虚5实20虚50...
  // ctx.setLineDash([5, 20, 50]);

  // 线
  ctx.moveTo(20, 100);
  ctx.lineTo(350, 100);
  ctx.stroke();

  // 矩形
  ctx.strokeRect(20, 120, 200, 100);

  // 圆
  ctx.beginPath();
  ctx.arc(100, 320, 30, 0, 2*Math.PI);
  ctx.stroke();

  // 文字
  ctx.font = "50px 黑体";
  ctx.strokeText("千锋", 200, 300);

  // 矩形
  ctx.fillRect(240, 120, 100, 100);




</script>
</html>